﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <meta name="keywords" content="AngularJS Tabs, Tabs Widget, TabView" />
    <meta name="description" content="AngularJS Tabs example. This example demonstrates Tabs events." /> 
    <title id='Description'>This demo demonstrates the basic AngularJS Tabs  events.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script> 
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../scripts/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets", "ngSanitize"]);
        demoApp.controller("demoController", function ($scope, $sce) {
            $scope.log = "";
            $scope.tabsSettings =
            {
                width: 1000,
                height: 200
            }
            $scope.created = function (event) {
                $scope.log += "Event: created<br/>";
            };

            $scope.selected = function (event) {
                $scope.log += "Event: selected, Tab Index:" + event.args.item + "<br/>";
            };


            $scope.tabClick = function (event) {
                $scope.log = "Event: tabclick, Tab Index:" + event.args.item + "<br/>";
            };

            $scope.unselected = function (event) {
                $scope.log += "Event: unselected, Tab Index:" + event.args.item + "<br/>";
            };

            $scope.getHTML = function (html) {
                return $sce.trustAsHtml(html);
            }
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-tabs jqx-settings="tabsSettings" jqx-on-tabclick="tabClick(event)" jqx-on-selected="selected(event)" jqx-on-unselected="unselected(event)" jqx-on-created="created(event)">
        <ul style='margin-left: 30px;'>
            <li>Node.js</li>
            <li>JavaServer Pages</li>
            <li>Active Server Pages</li>
        </ul>
        <div>
            Node.js is an event-driven I/O server-side JavaScript environment based on V8. It
            is intended for writing scalable network programs such as web servers. It was created
            by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which employs Dahl.
            Similar environments written in other programming languages include Twisted for
            Python, Perl Object Environment for Perl, libevent for C and EventMachine for Ruby.
            Unlike most JavaScript, it is not executed in a web browser, but is instead a form
            of server-side JavaScript. Node.js implements some CommonJS specifications. Node.js
            includes a REPL environment for interactive testing.
        </div>
        <div>
            JavaServer Pages (JSP) is a Java technology that helps software developers serve
            dynamically generated web pages based on HTML, XML, or other document types. Released
            in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was designed to address
            the perception that the Java programming environment didn't provide developers with
            enough support for the Web. To deploy and run, a compatible web server with servlet
            container is required. The Java Servlet and the JavaServer Pages (JSP) specifications
            from Sun Microsystems and the JCP (Java Community Process) must both be met by the
            container.
        </div>
        <div>
            ASP.NET is a web application framework developed and marketed by Microsoft to allow
            programmers to build dynamic web sites, web applications and web services. It was
            first released in January 2002 with version 1.0 of the .NET Framework, and is the
            successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built
            on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
            using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
            components to process SOAP messages.
        </div>             
    </jqx-tabs>
    <br />
    <br />
    <div style="font-family: 'segoe ui', arial, sans-serif;">
        <span ng-bind-html="getHTML(log)">{{log}}</span>
    </div>
</body>
</html>
